<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 - 问答管理</title>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .app-container {
            display: flex;
            height: 100vh;
        }

        .app-aside {
            background: #2d3a4b;
            padding: 0;
            height: 100vh;
            color: white;
        }

        .app-menu {
            height: 100%;
        }

        .app-header {
            background: #409EFF;
            color: white;
            text-align: center;
            line-height: 60px;
            height: 60px;
        }

        .app-main {
            padding: 20px;
            overflow: auto;
        }

        .el-table .is-reply-1 {
            background-color: #f0f9eb;
        }

        .el-table .is-reply-0 {
            background-color: #fef0f0;
        }

        .charts-container {
            display: flex;
            margin-top: 20px;
        }

        #line-chart, #pie-chart {
            width: 50%;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px" class="app-aside">
        <el-menu class="app-menu" :default-openeds="['1']">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>菜单</span>
                </template>
                <el-menu-item index="1-1" @click="navigateTo('后台需求3.html')">
                    <i class="el-icon-s-data"></i>仪表盘
                </el-menu-item>
                <el-menu-item index="1-2" @click="navigateTo('user.html')">
                    <i class="el-icon-user"></i>用户管理
                </el-menu-item>
                <el-menu-item index="1-3" @click="navigateTo('settings.html')">
                    <i class="el-icon-setting"></i>设置
                </el-menu-item>
                <el-menu-item index="1-4" @click="navigateTo('wenda1.html')">
                    <i class="el-icon-question"></i>问答管理
                </el-menu-item>
                <el-menu-item index="1-5" @click="navigateTo('公告1.html')">
                    <i class="el-icon-message"></i>公告管理
                </el-menu-item>
                <el-menu-item index="1-6" @click="navigateTo('购物车.html')">
                    <i class="el-icon-shopping-cart-full"></i>购物车管理
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>

    <!-- 右侧操作区域 -->
    <el-container>
        <el-header class="app-header">问答管理</el-header>
        <el-main class="app-main">



            <el-card class="box-card" style="margin-bottom: 20px;">

                <!-- 折线图和饼图 -->
                <div class="charts-container">
                    <div id="line-chart"></div>
                    <div id="pie-chart"></div>
                </div>
            </el-card>

            <!-- 表格数据 -->
            <el-card class="box-card">
                <!-- 搜索功能模块 -->
<!--                <div slot="header" class="clearfix">-->
<!--                    <span>搜索问题</span>-->
<!--                </div>-->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="问题">
                        <el-input v-model="searchForm.question" placeholder="输入问题关键字"></el-input>
                    </el-form-item>
                    <el-form-item label="用户">
                        <el-input v-model="searchForm.user" placeholder="输入用户关键字"></el-input>
                    </el-form-item>
                    <el-form-item label="是否回复">
                        <el-select v-model="searchForm.isreply" placeholder="选择状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已回复" value="1"></el-option>
                            <el-option label="未回复" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-form-item>
                </el-form>

                <div slot="header" class="clearfix">
                    <span>问答列表</span>
                </div>
                <el-table :data="qaData" style="width: 100%;" stripe border :row-class-name="tableRowClassName" height="400" :header-cell-styles="headerCellStyles" :header-row-style="headerRowStyle" v-loading="loading">
                    <el-table-column prop="id" label="ID" width="50"></el-table-column>
                    <el-table-column prop="question" label="问题"></el-table-column>
                    <el-table-column prop="answer" label="答案"></el-table-column>
                    <el-table-column prop="user" label="用户"></el-table-column>
                    <el-table-column prop="isreply" label="是否回复" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.isreply === 1 ? 'success' : 'danger'">
                                {{ scope.row.isreply === 1 ? '已回复' : '未回复' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" width="180"></el-table-column>
                    <el-table-column prop="replytime" label="回复时间" width="180"></el-table-column>
                    <el-table-column prop="quality" label="质量" width="100"></el-table-column>
                    <el-table-column prop="questiondetail" label="问题详情"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-close" size="mini" @click="handleReject(scope.row)">不受理</el-button>
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleReply(scope.row)">回复</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
            </el-card>


        </el-main>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchForm: {
                    question: '',
                    user: '',
                    isreply: ''
                },
                qaData: [
                    { id: 1, question: '如何使用此系统？', answer: '请参考用户手册。', user: '用户1', isreply: 1, create_time: '2023-07-01 10:00', replytime: '2023-07-01 12:00', quality: '高', questiondetail: '详细描述问题1' },
                    { id: 2, question: '系统出现错误怎么办？', answer: '', user: '用户2', isreply: 0, create_time: '2023-07-02 11:00', replytime: '', quality: '中', questiondetail: '详细描述问题2' }
                ],
                loading: false,
                total: 2
            }
        },
        methods: {
            navigateTo(page) {
                window.location.href = page; // 使用参数指定跳转页面路径
            },
            tableRowClassName({ row }) {
                return row.isreply === 1 ? 'is-reply-1' : 'is-reply-0';
            },
            handleReject(row) {
                console.log('不受理:', row);
            },
            handleReply(row) {
                console.log('回复:', row);
            },
            handleSearch() {
                console.log('搜索:', this.searchForm);
            },
            handleReset() {
                this.searchForm = {
                    question: '',
                    user: '',
                    isreply: ''
                };
            },
            handleCurrentChange(page) {
                console.log('分页:', page);
            },
            generateDateRange() {
                const dateList = [];
                const now = new Date();
                const year = now.getFullYear();
                const month = now.getMonth();
                const lastDay = new Date(year, month + 1, 0).getDate();
                for (let i = 1; i <= lastDay; i++) {
                    dateList.push(`${month + 1}-${i}`);
                }
                return dateList;
            },
            generateQAData() {
                return Array.from({ length: this.generateDateRange().length }, () => Math.floor(Math.random() * 20) + 5);
            },
            initLineChart() {
                var lineChart = echarts.init(document.getElementById('line-chart'));
                var lineOption = {
                    title: {
                        text: '本月问答量趋势',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.generateDateRange()
                    },
                    yAxis: {
                        type: 'value',
                        name: '问答量'
                    },
                    series: [
                        {
                            name: '问答量',
                            type: 'line',
                            data: this.generateQAData(),
                            itemStyle: {
                                color: '#409EFF'
                            }
                        }
                    ]
                };
                lineChart.setOption(lineOption);
            },
            initPieChart() {
                var pieChart = echarts.init(document.getElementById('pie-chart'));
                var pieOption = {
                    title: {
                        text: '回复状态占比',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '回复状态',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                { value: this.qaData.filter(row => row.isreply === 1).length, name: '已回复', itemStyle: { color: '#67C23A' }},
                                { value: this.qaData.filter(row => row.isreply === 0).length, name: '未回复', itemStyle: { color: '#F56C6C' }}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                pieChart.setOption(pieOption);
            },
            headerCellStyles(){
                return {
                    backgroundColor: '#F2F6FC'
                }
            },
            headerRowStyle(){
                return {
                    backgroundColor: '#E8EAF1'
                }
            }
        },
        mounted() {
            this.initLineChart();
            this.initPieChart();
        }
    });
</script>
</body>
</html>
